<!--  -->
<template>
  <div class="container">
    <van-nav-bar
      left-arrow="true"
      class="nav-class"
      @click-left="onClickLeft"
      title="奥林匹克花园"
    />
    <div class="upcontainer">
      <van-swipe class="my-swipe" :autoplay="1000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <div>
        <div class="top-container">
          <div class="top-title">奥林匹克花园</div>
          <span class="top-key">西城-西单</span>
          <span class="top-value">共234关注</span>
        </div>
      </div>
      <div class="mid-buttons-container">
        <div class="mid-button">
          <div class="mid-button-title">在售房源</div>
          <div class="mid-button-value">7套</div>
        </div>
        <div class="mid-button">
          <div class="mid-button-title">在售房源</div>
          <div class="mid-button-value">7套</div>
        </div>
        <div class="mid-button">
          <div class="mid-button-title">在售房源</div>
          <div class="mid-button-value">7套</div>
        </div>
      </div>
      <div class="mid-intro-container">
        <div class="title">5月参考均价：65482元/平</div>
        <div class="describe-detail">
          <span class="keyname">建筑年代：</span>
          <span class="keyvalue">2001-2007年 </span>
        </div>
        <div class="describe-detail">
          <span class="keyname">房屋用途:</span>
          <span class="keyvalue"> 多样</span>
        </div>
        <div class="describe-detail">
          <span class="keyname">开发企业：</span>
          <span class="keyvalue"> 北京鸿基源房地产开发有限公司</span>
        </div>
        <div class="contact-container">
          <img src="../assets/women.png" class="contact-image" alt="" />
          <button class="contact-button">咨询经纪人</button>
        </div>
      </div>
    </div>
    <ul id="list">
      <li v-for="site in sites" :key="site" class="item">
        <div class="title">基础属性</div>
        <div class="descrebes">
          <div class="describe-detail">
            <span class="keyname">单价：</span>
            <span class="keyvalue">72125元/平 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">朝向：</span>
            <span class="keyvalue"> 南北通透 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">类型：</span>
            <span class="keyvalue">塔楼 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">装修：</span>
            <span class="keyvalue"> 豪装 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">挂牌：</span>
            <span class="keyvalue"> 2017.9.18 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">楼层：</span>
            <span class="keyvalue"> 中楼层/26 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">电梯：</span>
            <span class="keyvalue"> 有电梯 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">年代：</span>
            <span class="keyvalue"> 2017年 </span>
          </div>
          <div class="describe-detail">
            <span class="keyname">权属：</span>
            <span class="keyvalue"> 商品房 </span>
          </div>
        </div>
      </li>
    </ul>
    <van-tabs>
      <van-tab v-for="tab in tabs" :key="tab" :title="tab.name">
        <img :src="tab.image" alt="" width="100%" height="225px" />
        <van-cell
          center
          is-link
          value="地铁：距离景泰站509米 距离西单站600米局 利永定门外站716米 距离大世界站986米"
        />
        <van-cell
          is-link
          center
          value="公交：距离景泰站509米 距离西单站600米局
利永定门外站716米 距离大世界站986米"
        />
      </van-tab>
    </van-tabs>
    <div class="upcontainer">
      <div class="tab-center">
        <label for="" class="recommand-tag">小区房源</label>
        <div>
          <label for="" class="tag-center">二手房 </label>
          <label for="" class="tag-right"> | 租房</label>
        </div>
      </div>
      <ul id="list-sec">
        <li v-for="site in sites" :key="site" class="item-sec">
          <img src="../assets/map.png" alt="" width="180px" height="135px" />
          <div class="li-title-sec">4室2厅/243㎡/南北通透</div>
          <div>
            <span class="li-svalue-sec">1100万元</span>
            <span class="li-value-sec">11546元/平</span>
          </div>
        </li>
      </ul>
      <div class="button-more" @click="moreInfo">全部在售21套</div>
    </div>
    <div class="upcontainer">
      <div class="tab-center">
        <label for="" class="recommand-tag">小区近期成交</label>
        <div>
          <label for="" class="tag-center">二手房 </label>
          <label for="" class="tag-right"> | 租房</label>
        </div>
      </div>

          <ul class="progress-container">
              <div class="left-line">
                  <div class="dot-1">
                  </div>
                  <div class="dot-2">
                  </div>
                  <div class="dot-3">
                  </div>
              </div>
              <li class="progress-item-container">
                  <div class="progress-item-left">
                      <div class="progress-item-left-up">2室2厅1卫 朝南 95㎡</div>
                      <div class="progress-item-left-down">2017.07.30 成交</div>
                  </div>
                  <div class="progress-item-right">420万</div>
              </li>
              <li class="progress-item-container">
                  <div class="progress-item-left">
                      <div>2室2厅1卫 朝南 95㎡</div>
                      <div>2017.07.30 成交</div>
                  </div>
                  <div class="progress-item-right">420万</div>
              </li>
              <li class="progress-item-container">
                  <div class="progress-item-left">
                      <div>2室2厅1卫 朝南 95㎡</div>
                      <div>2017.07.30 成交</div>
                  </div>
                  <div class="progress-item-right">420万</div>
              </li>
          </ul>
    </div>
        <div class="upcontainer">
      <div class="tab-center">
        <label for="" class="recommand-tag">相关推荐</label>
        <div>
          <label for="" class="tag-center">二手房 </label>
          <label for="" class="tag-right"> | 租房</label>
        </div>
      </div>
      <ul id="list-sec">
        <li v-for="site in sites" :key="site" class="item-sec">
          <img src="../assets/map.png" alt="" width="180px" height="135px" />
          <div class="li-title-sec">4室2厅/243㎡/南北通透</div>
          <div>
            <span class="li-svalue-sec">1100万元</span>
            <span class="li-value-sec">11546元/平</span>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      images: [
        require("../assets/lunbo1.png"),
        require("../assets/lunbo2.png"),
        require("../assets/lunbo3.png"),
        require("../assets/lunbo4.png"),
      ],
      sites: [{ name: "Runoob" }, { name: "Google" }, { name: "Runoob" }],
      tabs: [
        {
          name: "交通",
          image: require("../assets/map.png"),
        },
        {
          name: "医疗",
          image: require("../assets/lunbo1.png"),
        },
        {
          name: "生活",
          image: require("../assets/lunbo2.png"),
        },
        {
          name: "休闲",
          image: require("../assets/lunbo3.png"),
        },
        {
          name: "门店",
          image: require("../assets/lunbo4.png"),
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    moreInfo() {
      this.$router.push("/unitdetail");
    },
    districtClick() {
      this.$router.push("/unitsubmit");
    },
    houseSubmit() {
      this.$router.push("/housesubmit");
    },
    unitproperty() {
      this.$router.push("/unitproperty");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 254px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.top-container {
  padding: 15px 20px;
}
.top-title {
  font-size: 19px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #333333;
  line-height: 19px;
  padding-bottom: 12px;
}
.top-key {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #999999;
}
.top-value {
  display: inline-block;
  float: right;
  font-size: 13px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.mid-buttons-container {
  margin: 20px;
  border-style: solid none;
  border-width: 1px;
  border-color: #e1e1e1;
}
.mid-button {
  display: inline-block;
  width: 33%;
  height: 36px;
  margin: 15px 0;
  text-align: center;
  position: relative;
}
.mid-button-title {
  font-size: 12px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.mid-button-value {
  position: absolute;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #e75c61;
}
.keyname {
  font-size: 14px;
  color: #999999;
}
.keyvalue {
  font-size: 14px;
  color: #333333;
}
.describe-detail {
  height: 20px;
  line-height: 20px;
  display: block;
  margin-top: 5px;
}
.title {
  padding: 0;
  font-size: 17px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.mid-intro-container {
  padding: 0 20px 20px 20px;
  position: relative;
}
.contact-button {
  font-size: 11px;
  font-family: FZLanTingHei-R-GBK;
  font-weight: 400;
  color: #e75c61;
  border-radius: 13px;
  border: 1px solid #e75c61;
  display: block;
  margin: 0 auto;
  background: white;
}
.contact-image {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.contact-container {
  text-align: center;
  position: absolute;
  right: 20px;
  top: 0;
}
#list {
  /* display: flex;  */
  /* flex-flow:row nowrap;  */
  overflow-x: auto;
  list-style: none;
  width: auto;
  white-space: nowrap;
  background: #e1e1e1;
}
.progress-container {
    position: relative;
}
.left-line {
    background: red;
    width: 3px;
    height: calc(100%-40px);
    position:absolute;
    left: 25px;
    top:20px;
    bottom: 20px;
}
.dot-1 {
    position: relative;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    left: -3px;
}
.dot-2 {
    position: relative;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    left: -3px;
    top: 50%;
        transform: translate(0, -50%);
}
.dot-3 {
    position: relative;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    left: -3px;
    top: 80%;
}

.progress-item-container {
    margin: 0 15px 15px 15px;
        position: relative;

}
.progress-item-left {
    display: inline-block;
    margin-left: 30px;
}
.progress-item-left-up {
font-size: 14px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #333333;
}
.progress-item-left-down {
font-size: 12px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #666666;
}

.progress-item-right {
    /* display: inline-block; */
font-size: 15px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #E75C61;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    float: right;
    right: 0;
}

#list-sec {
  overflow-x: auto;
  list-style: none;
  width: auto;
  white-space: nowrap;
}
.item-sec {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  background: white;
}
.li-title-sec {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
}
.li-svalue-sec {
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #e75c61;
}
.li-value-sec {
  font-size: 12px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #999999;
  margin-left: 8px;
}
.item {
  margin-left: 20px;
  display: inline-block;
  width: 200px;
  margin: 10px 0 20px 20px;
  background: white;
  padding: 20px;
}
.tab-center {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  padding: 20px 15px 0 15px;
  background: white;
}
.recommand-tag {
  font-size: 19px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
}
.tag-center {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #e75c61;
  line-height: 20px;
}
.tag-right {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #666666;
  line-height: 20px;
}

.container {
  background: #e1e1e1;
}
.button-more {
  margin: 20px 30px 0 20px;
  height: 44px;
  background-color: #f1f1f1;
  border-radius: 22px;
  color: #e75c61;
  font-size: 15px;
  font-weight: regular;
  text-align: center;
  border: none;
  line-height: 44px;
}
.upcontainer {
  background: white;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
</style>
